 <template>
  <div>
    请选择你喜欢的专栏
    <!-- <p>
      <span v-for="(item, n) in arr" :key="item"
        >{{ item }}
        <input type="checkbox" @click="btn(n)" />
      </span>
    </p> -->
    <!-- <ul></ul> -->
    <p>
     科幻 <input type="checkbox" value="科幻" v-model="hobby">
     喜剧 <input type="checkbox" value="喜剧" v-model="hobby">
     动漫 <input type="checkbox" value="动漫" v-model="hobby">
     冒险 <input type="checkbox" value="冒险" v-model="hobby">
     科技 <input type="checkbox" value="科技" v-model="hobby">
     军事 <input type="checkbox" value="军事" v-model="hobby">
     娱乐 <input type="checkbox" value="娱乐" v-model="hobby">
     奇闻 <input type="checkbox" value="奇闻" v-model="hobby">
    </p>
    <ul>
      <li v-for="(item,index) in hobby" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
 
 <script>
export default {
  data() {
    return {
      // arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      hobby:[]
    };
  },
  // methods: {
  //   btn(m) {
  //     let str = `<li>${this.arr[m]}</li>`;
  //     document.querySelector("ul").innerHTML += str;
  //   },
  // },
};
</script>
 
 <style>
</style>